<template>
  <div class="hairsalon">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../../assets/images/icon_fanhui.png"/>
      </a>
      <a class="header_center" slot="center">
        <span>套餐详情</span>
      </a>
    </header-top>
    <div class="hairsalon_content_list">
      <div class="hairsalon_content">
        <flexbox>
          <flexbox-item>
            <div class="hairsalon_content_item">
              <p>经典发艺 深圳市龙华新区民治店</p>
            </div>
          </flexbox-item>
        </flexbox>
        <flexbox>
          <flexbox-item>
            <div class="hairsalon_content_img">
              <img src="../images/top_picture.png"/>
            </div>
          </flexbox-item>
        </flexbox>
        <p class="line"/>
        <flexbox>
          <flexbox-item>
            <div class="hairsalon_content_detail">
              <img src="../images/icon_dianhua.png" class="dianhua"/>
              <span style="font-size: 12px;">0753-3522568、0753-3522789</span>
              <img src="../../../assets/images/btn_jiantou.png" class="jiantou"/>
            </div>
          </flexbox-item>
        </flexbox>
        <p class="line"/>
        <flexbox>
          <flexbox-item>
            <div class="hairsalon_content_dizhi">
              <img src="../images/icon_weizhi.png" class="weizhi"/>
              <div style="font-size: 12px;" class="hairsalon_content_dizhi_detail">
                广东省深圳市宝安龙华新区省广东省深圳市宝安龙华新区省广东省深圳市宝安龙华新区省
              </div>
              <img src="../../../assets/images/btn_jiantou.png" class="jiantou"/>
              <span class="distance">8.6km</span>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="hairsalon_content">
        <p class="hairdresser_p">优惠套餐</p>
        <div class="hairdresser_discount_package_item active">
          <div class="discount_fuhao"><span>￥</span></div>
          <div class="discount_money"><span>35</span></div>
          <div class="discount_value"><span>洗剪吹1次，男女不限，发长不限</span></div>
        </div>
        <hairsty-list/>
      </div>
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, XButton} from 'vux'
  import HeaderTop from '../../../components/HeaderTop/HeaderTop'
  import HairstyList from '../../../pages/HairSalon/HairstyList/HairstyList'

  export default {
    name: "HairDresserDetail",
    components: {
      Flexbox, FlexboxItem, XButton,
      HeaderTop, HairstyList
    },
  }
</script>

<style scoped>
  .hairsalon_content_list {
    margin-bottom: 10px;
    margin-top: 58px;
  }

  .hairsalon_content {
    margin: 10px;
    background-color: #fff;
    border: 1px solid #ffdccd;
    border-radius: 3px;
  }

  .hairsalon_content_item {
    margin: 15px;
  }

  .hairsalon_content_item p {
    color: #000;
    font-size: 16px;
  }

  .hairsalon_content_img {
    margin: 10px 15px;
  }

  .hairsalon_content_img img {
    margin-top: -15px;
    width: 100%;
    height: 50%;
  }

  .hairsalon_content_detail {
    margin-left: 15px;
    height: 48px;
    line-height: 48px;
  }

  .hairsalon_content_dizhi {
    margin-left: 15px;
    height: 48px;
    line-height: 48px;
  }

  .hairsalon_content_dizhi_detail {
    float: left;
    overflow: hidden;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dianhua, .weizhi {
    width: 16px;
    height: 16px;
    margin-top: 16px;
    margin-right: 10px;
    float: left;
  }

  .jiantou {
    width: 9px;
    height: 15px;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
  }

  .distance {
    color: #a0a0a0;
    font-size: 10px;
    position: absolute;
    right: 45px;
  }

  .reservation_content_header p {
    height: 4px;
    margin: -4px 15px 0 15px;
    background: #ff6633;
  }

  .hairdresser_p {
    font-size: 12px;
    color: #a0a0a0;
    margin: 15px 0 0 15px;
  }

  .active {
    border: none !important;
    background-color: #ff6633;
    color: #fff !important;
  }

  .hairdresser_discount_package_item {
    border: 1px solid #ccc;
    color: #333;
    border-radius: 3px;
    margin: 10px 15px;
    height: 48px;
  }

  .discount_fuhao {
    float: left;
    margin-left: 30px;
    margin-top: 17px;
    font-size: 14px;
  }

  .discount_money {
    float: left;
    margin-top: 15px;
    font-size: 18px
  }

  .discount_value {
    float: left;
    margin-top: 15px;
    margin-left: 10px;
    font-size: 14px;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

</style>
